<!DOCTYPE html>
<html>
<div id="editForm">
  <div class="form-group">
    <label class="control-label col-xs-3 is-required">报文类型</label>
    <div class="input-icon right">
      <div class="col-xs-8" style="margin-bottom: 0px;">
        <select id="policyType_select" name="type" field="type" class="form-control select2">
          <option value=""></option>
          <option value="fixed">定长报文</option>
          <option value="delim">分隔符报文</option>
          <option value="xml">XML报文</option>
          <option value="cnaps1">CNAPS1报文</option>
          <option value="cnaps2">CNAPS2报文</option>
          <option value="http">HTTP报文</option>
          <option value="json">JSON报文</option>
          <option value="iso8583">ISO8583报文</option>
        </select>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-xs-3">描述信息</label>
    <div class="col-xs-8">
      <div class="input-icon right">
        <input type="text" id="policy_desc_txt" name="desc" field="desc" class="form-control"/>
      </div>
    </div>
  </div>

  <div id="fixedPkt_div">
    <div class="form-group">
      <label class="control-label col-xs-3">填充类型<span></span></label>
      <div class="col-xs-8" style="margin-bottom: 0px;">
        <select id="fillType_select" name="fillType" field="fillType" class="form-control select2">
          <option value="char">字符</option>
          <option value="byte">字节</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-xs-3">填充字符 <span> </span></label>
      <div class="col-xs-8">
        <div class="input-icon right">
          <input type="text" class="form-control" id="fillChar_txt" name="fillChar" field="fillChar"/>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-xs-3">填充方向</label>
      <div class="col-xs-8">
        <div class="input-icon right">
          <select id="fillLocation_select" name="fillLocation" field="fillLocation" class="form-control select2">
            <option value="left">左边填充</option>
            <option value="right">右边填充</option>
          </select>
        </div>
      </div>
    </div>

  </div>
  <div id="delim_Pkt_div">
    <div class="form-group">
      <label class="control-label col-xs-3 is-required">分隔符字符</label>
      <div class="col-xs-8">
        <div class="input-icon right">
          <input type="text" class="form-control" id="delimChar_txt" name="delimChar" field="delimChar" required/>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-xs-3">需要转义的字符串</label>
      <div class="col-xs-8">
        <div class="input-icon right">
          <input type="text" class="form-control" id="escapeChar_txt" name="escapeChar" field="escapeChar"/>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-xs-3">转义中文特殊字符</label>
      <div class="col-xs-8">
        <div class="input-icon right">
          <select id="escapeZh_select" name="escapeZh" field="escapeZh" class="form-control select2">
            <option value="true">是</option>
            <option value="false">否</option>
          </select>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-xs-3">转义字符</label>
      <div class="col-xs-8">
        <div class="input-icon right">
          <input type="text" class="form-control" id="escapePrefix_txt" name="escapePrefix" field="escapePrefix"/>
        </div>
      </div>
    </div>
  </div>

  <div id="xml_Pkt_div">
    <div id="xml_pkt_pack_div">
      <div class="form-group">
        <label class="control-label col-xs-3">显示序言</label>
        <div class="col-xs-8">
          <div class="input-icon right">
            <select id="prologue_select" name="prologue" field="prologue" class="form-control select2">
              <option value="true">是</option>
              <option value="false">否</option>
            </select>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label class="control-label col-xs-3">是否产生空节点</label>
        <div class="col-xs-8">
          <div class="input-icon right">
            <select id="genEmptyNode_select" name="genEmptyNode" field="genEmptyNode" class="form-control select2">
              <option value="true">是</option>
              <option value="false">否</option>
            </select>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label class="control-label col-xs-3">XML输出格式</label>
        <div class="col-xs-8">
          <div class="input-icon right">
            <select id="prettyprint_select" name="prettyprint" field="prettyprint" class="form-control select2">
              <option value="">根据系统来换行</option>
              <option value="no">不换行</option>
              <option value="n">用\n换行</option>
              <option value="rn">用\r\n换行</option>
            </select>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label class="control-label col-xs-3">缩进填充字符串</label>
        <div class="col-xs-8">
          <div class="input-icon right">
            <input type="text" class="form-control" id="indent_txt" name="indent" field="indent"/>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-xs-3">编码方式</label>
      <div class="col-xs-8">
        <div class="input-icon right">
          <select id="encoding_select" name="encoding" field="encoding" class="form-control select2">
            <option value="GBK">GBK</option>
            <option value="UTF-8">UTF-8</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <div id="cnaps2_Pkt_div">
    <div class="form-group">
      <label class="control-label col-xs-3">默认名称空间</label>
      <div class="col-xs-8">
        <div class="input-icon right">
          <input type="text" class="form-control" id="ns_def_txt" name="ns_def" field="ns_def"/>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-xs-3">名称空间</label>
      <div class="col-xs-8">
        <div class="input-icon right">
          <input type="text" class="form-control" id="ns_txt" name="ns" field="ns"/>
        </div>
      </div>
    </div>
  </div>


  <div id="http_Pkt_div">
    <div class="form-group">
      <label class="control-label col-xs-3 is-required">编码方式</label>
      <div class="col-xs-8">
        <div class="input-icon right">
          <select id="http_encoding_select" name="encoding" field="encoding" class="form-control select2" required>
            <option value="UTF-8">UTF-8</option>
            <option value="GBK">GBK</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <!-- json -->
  <div id="json_Pkt_div">
    <div class="form-group">
      <label class="control-label col-xs-3">自动适配<span></span></label>
      <div class="col-xs-8">
        <div class="input-icon right">
          <select id="json_autmap_select" name="automap" field="automap" class="form-control select2">
            <option value="false" id="json_autmap_select_false">否</option>
            <option value="true" id="json_autmap_select_true">是</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <!-- iso8583 -->
  <div id="iso8583_Pkt_div">
    <div class="form-group">
      <label class="control-label col-xs-3">位图格式<span></span></label>
      <div class="col-xs-8">
        <div class="input-icon right">
          <select id="bitmapencoding_select" name="bitmapencoding" field="bitmapencoding" class="form-control select2">
            <option value="bin">二进制</option>
            <option value="hex">字符串</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">

  $(function () {
    hideAllPkt();
    var useType = pktSelectNode.rootType
    var value = pktSelectNode.dataModel ? pktSelectNode.dataModel.type : '';
    if (pktSelectNode.dataModel){
      applyDrawing('#editForm',pktSelectNode.dataModel)
    }

    //绑定事件
    bindEvents(useType);
    if (value && useType) {
      dealPktType(useType, value);
    }

  })


  function bindEvents(useType) {
    //报文类型选择
    $("#policyType_select").bind("change", function () {
      var value = $(this).val();
      dealPktType(useType, value);
    });
  }

  function hideAllPkt() {
    $("#delim_Pkt_div").hide();
    $("#fixedPkt_div").hide();
    $("#xml_Pkt_div").hide();
    $("#cnaps2_Pkt_div").hide();
    $("#http_Pkt_div").hide();
    $("#json_Pkt_div").hide();
    $("#iso8583_Pkt_div").hide();
    disabledAll("delim_Pkt_div");
    disabledAll("fixedPkt_div");
    disabledAll("xml_Pkt_div");
    disabledAll("cnaps2_Pkt_div");
    disabledAll("http_Pkt_div");
    disabledAll("json_Pkt_div");
    disabledAll("iso8583_Pkt_div");
  }

  //改变报文类型的值改变作用的元素
  function dealPktType(useType, pktType) {
    if (pktType == "fixed") {
      $("#delim_Pkt_div").hide();
      $("#xml_Pkt_div").hide();
      $("#cnaps2_Pkt_div").hide();
      $("#http_Pkt_div").hide();
      $("#json_Pkt_div").hide();
      $("#iso8583_Pkt_div").hide();
      disabledAll("delim_Pkt_div");
      disabledAll("xml_Pkt_div");
      disabledAll("cnaps2_Pkt_div");
      disabledAll("http_Pkt_div");
      disabledAll("json_Pkt_div");
      disabledAll("iso8583_Pkt_div");
      $("#fixedPkt_div").show();
      enableAll("fixedPkt_div");
    } else if (pktType == "delim") {
      $("#delim_Pkt_div").show();
      enableAll("delim_Pkt_div");

      $("#fixedPkt_div").hide();
      $("#cnaps2_Pkt_div").hide();
      $("#http_Pkt_div").hide();
      $("#xml_Pkt_div").hide();
      $("#json_Pkt_div").hide();
      $("#iso8583_Pkt_div").hide();
      disabledAll("fixedPkt_div");
      disabledAll("xml_Pkt_div");
      disabledAll("cnaps2_Pkt_div");
      disabledAll("http_Pkt_div");
      disabledAll("json_Pkt_div");
      disabledAll("iso8583_Pkt_div");
    } else if (pktType == "xml") {
      $("#xml_Pkt_div").show();
      enableAll("xml_Pkt_div");
      $("#delim_Pkt_div").hide();
      $("#fixedPkt_div").hide();
      $("#cnaps2_Pkt_div").hide();
      $("#json_Pkt_div").hide();
      $("#iso8583_Pkt_div").hide();
      disabledAll("delim_Pkt_div");
      disabledAll("fixedPkt_div");
      disabledAll("http_Pkt_div");
      disabledAll("json_Pkt_div");
      disabledAll("iso8583_Pkt_div");
      $("#http_Pkt_div").hide();
      if (useType == "pack") {
        $("#xml_pkt_unpack_div").hide();
        disabledAll("xml_pkt_unpack_div");
        $("#xml_pkt_pack_div").show();
        enableAll("xml_pkt_pack_div");
      } else if (useType == "unpack") {
        $("#xml_pkt_pack_div").hide();
        disabledAll("xml_pkt_pack_div");
        $("#xml_pkt_unpack_div").show();
        enableAll("xml_pkt_unpack_div");
      }
    } else if (pktType == "cnaps1") {
      $("#fixedPkt_div").hide();
      $("#http_Pkt_div").hide();
      $("#delim_Pkt_div").hide();
      $("#xml_Pkt_div").hide();
      $("#json_Pkt_div").hide();
      $("#iso8583_Pkt_div").hide();
      $("#cnaps2_Pkt_div").hide();
      disabledAll("http_Pkt_div");
      disabledAll("delim_Pkt_div");
      disabledAll("fixedPkt_div");
      disabledAll("xml_Pkt_div");
      disabledAll("json_Pkt_div");
      disabledAll("iso8583_Pkt_div");
    } else if (pktType == "cnaps2") {
      $("#delim_Pkt_div").hide();
      $("#xml_Pkt_div").hide();
      $("#http_Pkt_div").hide();
      $("#fixedPkt_div").hide();
      $("#json_Pkt_div").hide();
      $("#iso8583_Pkt_div").hide();
      disabledAll("delim_Pkt_div");
      disabledAll("fixedPkt_div");
      disabledAll("http_Pkt_div");
      disabledAll("xml_Pkt_div");
      disabledAll("json_Pkt_div");
      disabledAll("iso8583_Pkt_div");
      $("#cnaps2_Pkt_div").show();
      enableAll("cnaps2_Pkt_div");
    } else if (pktType == "http") {
      $("#cnaps2_Pkt_div").hide();
      $("#delim_Pkt_div").hide();
      $("#fixedPkt_div").hide();
      $("#xml_Pkt_div").hide();
      $("#json_Pkt_div").hide();
      $("#iso8583_Pkt_div").hide();
      $("#http_Pkt_div").show();
      disabledAll("cnaps2_Pkt_div");
      disabledAll("delim_Pkt_div");
      disabledAll("fixedPkt_div");
      disabledAll("xml_Pkt_div");
      enableAll("http_Pkt_div");
      disabledAll("json_Pkt_div");
      disabledAll("iso8583_Pkt_div");
    } else if (pktType == "json") {
      $("#json_Pkt_div").show();
      enableAll("json_Pkt_div");
      //判断界面是否有接入接出的select 如果没有，则为报文头。报文头不需要要自动配置
      var pkt_range_select = $("#pkt_range_select").val();
      if (undefined == pkt_range_select) {
        $("#json_autmap_select_true").remove();
      }
      $("#xml_Pkt_div").hide();
      $("#delim_Pkt_div").hide();
      $("#fixedPkt_div").hide();
      $("#cnaps2_Pkt_div").hide();
      $("#http_Pkt_div").hide();
      $("#iso8583_Pkt_div").hide();
      disabledAll("delim_Pkt_div");
      disabledAll("fixedPkt_div");
      disabledAll("http_Pkt_div");
      disabledAll("xml_Pkt_div");
      disabledAll("cnaps2_Pkt_div");
      disabledAll("iso8583_Pkt_div");
    } else if (pktType == "iso8583") {
      $("#xml_Pkt_div").hide();
      $("#delim_Pkt_div").hide();
      $("#fixedPkt_div").hide();
      $("#cnaps2_Pkt_div").hide();
      $("#http_Pkt_div").hide();
      $("#json_Pkt_div").hide();
      disabledAll("delim_Pkt_div");
      disabledAll("fixedPkt_div");
      disabledAll("http_Pkt_div");
      disabledAll("xml_Pkt_div");
      disabledAll("cnaps2_Pkt_div");
      disabledAll("json_Pkt_div");
      $("#iso8583_Pkt_div").show();
      enableAll("iso8583_Pkt_div");
    }
  }

</script>
